<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度一下，你就知道</title>	
	<link rel="stylesheet" href="css/baidu.css" />
</head>
<body>
	<div class="ysj">
		<ul>
			<li>
				<a href="">新闻</a>
			</li>
			<li>
				<a href="">hao123</a>
			</li>
			<li>
				<a href="">地图</a>
			</li>
			<li>
				<a href="">视频</a>
			</li>
			<li>
				<a href="">贴吧</a>
			</li>
			<li class="zt">
				<a href="">登录</a>
			</li>
			<li class="zt">
				<a href="">设置</a>
			</li>
			<li class="gd zt">
				<a href="">更多产品</a>
			</li>
		</ul>
	</div>

	<div class="txtpp">
		<img src="img/bd_logo1.png" width="270" height="129"/>
		<span class="text">
			<input id="so" type="text"/>	
		</span>
		<button class="an">百度一下</button>

		<div id="sosed">
			<ul class="slist"></ul>
		</div>
	</div>	
			

	<div class="queue">
		<div class="queue-s">
		<a href="">把百度设为主页</a>
		<a href="">关于百度</a>
		<a href="">About&nbsp;&nbsp;Baidu</a>
		</div>
		
		
		<br />
		<div class="quene-x">
			&copy;2016Baidu &nbsp;
			<a href="">使用百度前必读</a>
			京ICP证030173号
		</div>
	</div>

<script src="../../lib/jquery.min.js"></script>
<script>
	!function(window,document,$,undefined) {

		var $so = $('#so');
		var timer;
		var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFuncallback=?';


		var init = function() {

			$so.on('keyup',keyEvent);

		};

		var keyEvent = function(e) {

			var e = window.event || evnet;
			/**
			 * 优化请求次数
			 */
			if(timer) {clearTimeout(timer)};

			timer = setTimeout(function() {
				ajaxlist();
			},500);
			
							   
			if(e.keyCode == 40 || e.keyCode == 38) {

				var $ul = $('.slist'),
					len = $ul.find('li').length,
					index = $ul.find('li.hover').index(),
					listval = $ul.find('li.hover').html();

				$so.val(listval);
				if(e.keyCode == 40){
					index < 0 ? index = 0 : index++;
				}else {
					index < 0 ? index = len : index--;
				}
				
				//index = len ? index = 0 : index;
				
				$ul
					.find('li:eq('+ index +')')
					.addClass('hover')
					.siblings('.hover')
					.removeClass('hover');
				
			}
			
		}

		var ajaxlist = function () {

			var txt = $so.val();

			$.get(url,{wd : txt},function(response) {
					
				var arr = [],
					text = response.s,
				    len = text.length;
				    //console.log(text)
				for(var i = 0; i < len; i++) {

					arr.push(

						'<li>',text[i],'</li>'	

					)

				}
				
				$('#sosed ul').html(arr.join(''))

			},'json')

		};

		/*function throttle(fn, threshhold, scope) {
		    threshhold || (threshhold = 250);
		    var last,
		        timer;
		    return function () {
		        var context = scope || this;
		        var now = +new Date(),
		            args = arguments;
		        if (last && now - last + threshhold < 0) {
		            // hold on to it
		            clearTimeout(deferTimer);
		            timer = setTimeout(function () {
		                last = now;
		                fn.apply(context, args);
		            }, threshhold);
		        } else {
		            last = now;
		            fn.apply(context, args);
		        }
		    };
		}*/

		$(document).ready(init);

	}(window,document,jQuery);
</script>
</body>
</html>
	
	
